<template>
  <div class="w">
    <div class="image">
      <img src="https://bpic.588ku.com/element_origin_min_pic/19/06/15/d9b1152a4f8e7a15cf23b63a22521525.jpg" alt="">
    </div>
    <!-- 注册 -->
    <van-form @submit="onSumit" class="form">
      <van-field class="field" v-model="username" name="手机号" label="手机号" placeholder="手机号" autocomplete="off" :rules="[{
        required: true,
        message: '请填正确格式账号',
        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      }]" />
      <van-field class="field" v-model="password1" type="password" label="密码" placeholder="请输入密码"
        autocomplete="new-password" :rules="[{
          required: true,
          message: '密码必须由数字、字母两种字符组成，长度在8-15位之间',
          pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/
        }]">
      </van-field>
      <van-field class="field" v-model="password2" type="password" label="确认密码" placeholder="请再次输入密码"
        autocomplete="new-password" :rules="[{
          required: true,
          message: '密码必须由数字、字母两种字符组成，长度在8-15位之间',
          pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/
        }]">
      </van-field>
      <div class="van-ellipsis" @click="changeUser">账号密码登录</div>
      <div style="margin: 16px;">
        <van-button round block native-type="submit" color="#ff4c4c">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import http from '@/util/api'
import { showDialog, showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
// 注册信息判断
const username = ref('')
const password1 = ref('')
const password2 = ref('')
// 日期
const m = ref(1)
const d = ref(1)
// 随机获取一个id和一个token值
let num: any = ref(1)
let num2: any = ref(1)
let nid: any = ref(1111)
let token: any = ref(2222)
let num3: any = ref()
let num4: any = ref()

// 获取日期数据
onMounted(() => {
  d.value = new Date().getDate()
  m.value = new Date().getMonth() + 1
  num.value = Number(Math.random().toFixed(4))
  num2.value = Number(Math.random().toFixed(4))
  num3.value = num.value * 10000
  num4.value = num2.value * 10000
  nid.value = parseInt(num3.value)
  token.value =parseInt(num4.value)
})

// 点击注册
const onSumit = () => {
  if (nid.value.toString().length < 4) {
    for (let i = 0; i < 4 - nid.value.toString().length; i++) {
      nid.value = Number(nid.value + '0')
    }
  }
  if (token.value.toString().length < 4) {
    for (let i = 0; i < 4 - token.value.toString().length; i++) {
      token.value = Number(token.value + '0')
    }
  }
  let dataList = {
    "id": nid.value,
    "username": "",
    "token": token.value,
    "sex": "",
    "sign": "",
    "imgurl": "",
    "telephone": username.value,
    "password": password1.value,
    "day": [
      {
        "m": m.value
      },
      {
        "d": d.value
      }
    ]
  }
  if (password1.value != password2.value) {
    showToast({
      message: '两次密码不一致，请核实！',
      position: 'top',
    })
    return {
      password1,
      password2
    }
  } else {
    http(`/userlist?telephone=${username.value}&password=${password1.value}`).then((res: any) => {
      let { data } = res
      if (data.length != 0) {
        showDialog({
          message: '账号已存在！请核实',
          theme: 'round-button',
        }).then(() => {
          // on close
        })
        password1.value = ''
        password2.value = ''
        return
      } else {
        // 发送注册请求 
        http('/userlist', "POST", dataList).then((res: any) => {
          let { data } = res
          // Object.keys 判断当前的注册信息是否存入
          if (Object.keys(data).length != 0) {
            showToast({
              message: '注册成功！',
              position: 'top',
            })
            router.push('/login')
          } else {
            showToast({
              message: '注册失败！请重试',
              position: 'top',
            })
          }
        })
      }
    })
  }
}
// 点击账号密码登录
const changeUser = () => {
  router.push('/login')
}
</script>
<style lang="scss" scoped>
.w {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6f6f6;

  .image {
    margin-top: 150px;
    width: 100%;

    img {
      width: 50%;
      display: block;
      margin: 0 auto;
    }
  }

  .form {
    margin: 100px auto;
    width: 80%;
    height: 70vw;
  }
}

.field {
  height: 110px;
  background-color: #f6f6f6;
}

.van-ellipsis {
  width: 80%;
  margin: 40px auto;
  color: #666666;
  font-size: 23px;
}
</style>